<template>
	<view class="">
		<navbar title="数据详情" :back="true" bgColor="#fff" leftIconColor="#000"></navbar>
		<view style="padding: 20rpx;">
			<view style="background-color: #fff;padding:20rpx;border-radius: 20rpx;">
				<view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
					<view style="color: #333;font-size: 28rpx;font-weight: 650;">数据概览</view>
				</view>
				<circleTab :tabList='list' @getId='getId' :index='1'></circleTab>
				<view style="display: flex;align-items: center;flex-wrap:wrap;width: 100%;">
					<view v-for="(item,index) in overList" :key="index" style="text-align: center;width:33%;margin-top: 40rpx;">
						<view style="color:#333;font-weight: 650;">{{item.price}}</view>
						<view style="color: #999;font-size: 22rpx;margin-top: 10rpx;">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view style="background-color: #fff;padding:20rpx;border-radius: 20rpx;margin-top: 20rpx;">
				<view style="margin-bottom: 20rpx;">
					 <u-tabs :list="navList" @click="getNavId" lineColor='#FF3F3F'></u-tabs>
				</view>
				<view v-if="isEc">
					 <EcCanvas ref="myEc" :sale='sale' :wait='dataList[sid].wait' :time='times' :settle="dataList[sid].settle" :total="dataList[sid].total" :isMule="true" :totalN="`总额: ${total}`" :settleN="`退款: ${settle}`" :waitN="`销售: ${wait}`"></EcCanvas>
				</view>
			</view>
			<view style="background-color: #fff;padding:20rpx;border-radius: 20rpx;margin-top: 20rpx;">
				<view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
					<view style="color: #333;font-size: 28rpx;font-weight: 650;">实际销售数据</view>
				</view>
				<Tab :tabList='shoplist' @getId='getIdx' :index='0'></Tab>
				<u-picker :show="show" :columns="columns" keyName='name' :closeOnClickOverlay='true' @cancel='show=false' @close='show=false' @confirm='confirm'></u-picker>
				<view v-if="idx==0">
					<view style="display: flex;align-items: center;justify-content: space-between;padding-left: 20rpx;margin-top:20rpx;">
						<view></view>
						<view style="display: flex;align-items: center;width: 380rpx;">
							<orderBy :optionlist="newList" @change="newchange" />
							<view style="display: flex;align-items: center;" @click="show=true">
								<view style="margin-right: 10rpx;font-size: 26rpx;">{{orderT}}</view>
								<image  src="@/static/jing-orderby/filter_tri.png" style="width: 14rpx;height: 10rpx;"></image>
							</view>
						</view>
					</view>
					<view v-for="(item,index) in orderList" :key="index" style="margin-bottom: 20rpx;background-color:#00000005;border-radius: 20rpx;padding: 20rpx;">
						<view style="display: flex;align-items: center;">
							<image :src="item.productImg" mode="" style="width:104rpx;height: 104rpx;border-radius: 10rpx;"></image>
						    <view style="width: 436rpx;margin-left: 20rpx;">
								<view style="color:#333;font-size: 24rpx;width: 436rpx;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;word-break: break-all;">{{item.productName}}</view>
							  <view style="display: flex;justify-content: space-between;align-items: center;">
								  <view style="padding: 2rpx 10rpx;font-size:20rpx;border-radius: 4rpx;display: inline-block;" :style="{backgroundColor:item.flowPoint=='PAY_SUCC'?'#FFECEC':item.flowPoint=='REFUND'?'#E7F3FF':item.flowPoint=='SETTLE'?'#FFF2E3':item.flowPoint=='CONFIRM'?'#FFECEC':'',color:item.flowPoint=='PAY_SUCC'?'#FF3F3F':item.flowPoint=='REFUND'?'#6FBAFF':item.flowPoint=='SETTLE'?'#FFA842':item.flowPoint=='CONFIRM'?'#FF3F3F':''}" >{{item.flowPoint=='REFUND'?'退款':item.flowPoint=='PAY_SUCC'?'支付完成':item.flowPoint=='SETTLE'?'已结算':item.flowPoint=='CONFIRM'?"确认收货":''}}</view>
								  <view style="display: flex;align-items: center;color: #999;font-size: 20rpx;margin: 10rpx 0;">
								  	<view style="margin-left: 10rpx;">{{item.paySuccessTime}}</view>
									<view class="">付款</view>
								  </view>
							  </view>
							</view>
						</view>
						<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;padding-bottom: 20rpx;">
							<view style="text-align: center;">
								<view style="font-size: 20rpx;color:#333;">支付金额 (元)</view>
								<view style="font-size: 28rpx;color:#ff3f3f;margin-top: 10rpx;font-weight: 650;">{{item.price}}</view>
							</view>
							<view style="text-align: center;">
								<view style="font-size: 20rpx;color:#333;">获得佣金 (元)</view>
								<view style="font-size: 28rpx;color:#ff3f3f;margin-top: 10rpx;font-weight: 650;">{{item.brokeragePrice}}</view>
							</view>
							<view style="text-align: center;">
								<view style="font-size: 20rpx;color:#333;">动销比例</view>
								<view style="font-size: 28rpx;color:#ff3f3f;margin-top: 10rpx;font-weight: 650;">{{((item.brokeragePrice/item.price)*100).toFixed(2)}}%</view>
							</view>
						</view>
						<view style="padding-top: 20rpx;border-top:1rpx solid #eee;display: flex;align-items: center;justify-content:space-between;">
							<view style="display: flex;align-items: center;">
								<image :src="item.avatar" mode="" style="width:40rpx;height:40rpx;border-radius:50%;"></image>
								<view style="margin-left: 16rpx;font-size:22rpx;color: #333;">{{item.nickname}}</view>
							</view>
							<u-icon name="arrow-right" color="#666" size="12"></u-icon>
						</view>
					</view>
				</view>
				<view v-else>
					<view style="display: flex;align-items: center;justify-content: space-between;padding-left: 20rpx;margin-bottom:20rpx;">
						<view style="color: #666;font-size: 24rpx;">商品信息</view>
						<view style="width: 440rpx;">
							<orderBy :optionlist="byList" @change="shopchange" />
						</view>
					</view>
					<view v-for="(item,index) in shopList" :key="index" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 40rpx;">
						<view style="display: flex;align-items: center;">
							<image :src="item.productImage" mode="" style="width:64rpx;height: 64rpx;border-radius: 10rpx;margin-right: 10rpx;"></image>
							<view  style="color: #333;font-size: 22rpx;width: 158rpx;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;word-break: break-all;">{{item.productName}}</view>
						</view>
						<view style="font-size: 24rpx;color: #333;width: 200rpx;text-align: center;">{{item.gmv}}</view>
						<view style="font-size: 24rpx;color: #333;width:150rpx;text-align: center;">{{item.bd}}</view>
						<view style="font-size: 24rpx;color: #333;width: 200rpx;text-align: center;">{{item.totalNum}}</view>
					</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import {
		getStatisDetSub,
		getStatisDet
	} from '@/api/statistics.js'
	import {
		getProductTopList,
		getProductOdrList
	} from "@/api/shopAuth.js"
	import navbar from '@/components/baseNavbar.vue'
	import circleTab from "@/components/circle-tabs/circle-tabs.vue"
	import Tab from "@/components/tab.vue"
	import EcCanvas from '@/components/lineEcharts.vue'
	import orderBy from '@/components/jing-orderby/jing-orderby.vue'
	export default {
		components:{
			navbar,
			circleTab,
			Tab,
			EcCanvas,
			orderBy
		},
		data(){
			return{
				dateType:1,
				title:'销售额',
				orderT:'全部订单',
				show:false,
				columns: [
				    [{
						name:'全部订单',
						flowPoint:''
					},{
						name:'支付完成',
						flowPoint:'PAY_SUCC'
					},{
						name:'退款',
						flowPoint:'REFUND'
					},{
						name:'已结算',
						flowPoint:'SETTLE'
					},{
						name:'确认收货',
						flowPoint:'CONFIRM'
					}]
				],
				idx:0,
				wait:0,
				settle:0,
				total:0,
				sale:{
					min:0,
					max:''
				},
				times:[],
				dataList:[
					{
						wait:[],
						settle:[],
						total:[]
					},
				],
				sid:0,
				list:[
					{
						id:1,
						title:'今日'
					},{
						id:2,
						title:'近7天'
					},{
						id:3,
						title:'近30天'
					},{
						id:4,
						title:'本周'
					},{
						id:5,
						title:'本月'
					}
				],
				shoplist:[
					{
						id:0,
						title:'商品订单'
					},{
						id:1,
						title:'商品排行'
					}
				],
				shopList:[],
				byList:[
					{
						name: 'GMV',
						value: 1,
						isAsc: false,
						type: 1
					},
					{
						name: '哔滴次数',
						value: 2,
						isAsc: false,
						type: 1
					},
					{
						name: '订单数',
						value: 3,
						isAsc: false,
						type: 1,
					}
				],
				overList:[
					{
						title:'总订单数',
						price:'138',
					},{
						title:'退款单数',
						price:'138',
					},{
						title:'销售单数',
						price:'138',
					},{
						title:'总金额',
						price:'25.76',
					},{
						title:'退款金额',
						price:'3576.8',
					},{
						title:'销售金额',
						price:'24.52',
					}
				],
				navList:[
					{
						id:0,
						name:'销售额'
					},{
						id:1,
						name:'订单数'
					}
				],
				isEc:true,
				newList:[
					{
						name: '下单时间',
						value: 1,
						isAsc: false,
						type: 1
					}
				],
				params:{
				  limit: 10,
				  page: 1,
				  load: true,
				  orderType:1,
				  byType:1,
				},
				newPro:{
					limit: 10,
					page: 1,
					load: true,
					byType:1,
					flowPoint:''
				}
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
			console.log('111',this.scrollTop);
			if(this.scrollTop>400){
				this.isEc=false
			}else{
				this.isEc=true
			}
		},
		onLoad() {
			getStatisDetSub({dateType:this.dateType}).then(res=>{
				console.log('11',res);
				if(res.code==200){
					this.overList[0].price = res.data.totalNum
					this.overList[1].price = res.data.refundNum
					this.overList[2].price = res.data.num
					this.overList[3].price = res.data.totalPrice
					this.overList[4].price = res.data.refundPrice
					this.overList[5].price = res.data.price
				}
			})
			this.getStatis()
			this.resetNewList()
		},
		methods:{
			confirm(e){
				console.log('111',e);
				this.orderT = e.value[0].name
				this.newPro.flowPoint = e.value[0].flowPoint
				this.show = false
				this.resetNewList()
			},
			newchange(e){
				this.newPro.byType = e.isAsc?0:1
				this.resetNewList()
			},
			shopchange(e){
				console.log('e',e);
				this.params.orderType = e.value
				this.params.byType = e.isAsc?0:1
				this.resetList()
			},
			resetList() {
				this.params.page = 1
				this.shopList = []
				this.getList()
			},
			getList() {
				if (!this.params.load) {
					return;
				}
				this.params.load = false;
				console.log('列表，参数', this.params);
				getProductTopList(this.params).then(res => {
					console.log('111',res);
					this.params.page++
					this.shopList = this.shopList.concat(res.data.list)
					this.params.load = true
				})
			
			},
			resetNewList() {
				this.newPro.page = 1
				this.orderList = []
				this.getNewList()
			},
			getNewList() {
				if (!this.newPro.load) {
					return;
				}
				this.newPro.load = false;
				console.log('列表，参数', this.newPro);
				getProductOdrList(this.newPro).then(res => {
					this.newPro.page++
					this.orderList = this.orderList.concat(res.data.list)
					console.log('111',this.orderList);
					this.newPro.load = true
				})
			
			},
			getId(id){
				this.dateType = id
				console.log('1111',this.dateType);
				this.getStatis()
				getStatisDetSub({dateType:this.dateType}).then(res=>{
					if(res.code==200){
						this.overList[0].price = res.data.totalNum
						this.overList[1].price = res.data.refundNum
						this.overList[2].price = res.data.num
						this.overList[3].price = res.data.totalPrice
						this.overList[4].price = res.data.refundPrice
						this.overList[5].price = res.data.price
					}
				})
			},
			getIdx(id){
				console.log('111',id);
				this.idx = id
				if(id){
					this.resetList()
				}else{
					this.resetNewList()
				}
			},
			getNavId(e){
				console.log('11',e);
				this.sid = e.id
				this.title = e.name
				let nameObj={
					waitN:`销售: ${this.wait}`,
					settleN:`退款: ${this.settle}`,
					totalN:`总额: ${this.total}`
				}
				let actuObj={
					wait:this.dataList[e.id].wait,
					settle:this.dataList[e.id].settle,
					total:this.dataList[e.id].total
				}
				this.$refs.myEc.getdetData(nameObj,actuObj);
				console.log('11',e);
			},
			getStatis(){
				getStatisDet({dateType:this.dateType}).then(res=>{
					this.times = res.data.times
					this.sale = res.data.sale
					this.dataList = res.data.dataList
					res.data.dataList[this.sid].wait.forEach(e=>{
						let s = Number(e)
						this.wait += s
					})
					res.data.dataList[this.sid].total.forEach(e=>{
						let s = Number(e)
						this.total += s
					})
					res.data.dataList[this.sid].settle.forEach(e=>{
						let s = Number(e)
						this.settle += s
					})
				})
			},
		}
	}
</script>

<style>
	page{
		background-color:#F5F5F5;
		height: 100%;
	}
</style>